@charset "utf-8";
$bluecolor:#2395cb;
$whitecolor:#f6f6f6;
$blackfontcolor:#272727;
$greencolor:#3ed1a4;
$purplecolor:#895ea3;
$weakwhite:#f6f6f6;
@mixin basic($wid,$hei,$bgcolor){
    width: $wid;
    height: $hei;
    background: $bgcolor;
}

@mixin secondbasic($wid,$hei,$mar){
    width: $wid;
    height: $hei;
    margin: $mar;
}

body{
    background: #f6f6f6;
    #web{
        width: 100%;
        height: 100%;
        header{
            width: 100%;
            background: white;
            nav{
                width: 995px;
                height: 96px;
                margin: 0 auto;
                
                .logo{
                    display: inline-block;
                    width: 300px;
                    height: 96px;
                    img{
                        width: 100%;
                    }
                }
                ul{
                    width: 600px;
                    font-size: 0;
                    li.active{
                        background: #faf8f8;
                        border-bottom: 3px solid $bluecolor;
                    }
                    li{
                        display: inline-block;
                        width: 85px;
                        height: 93px;
                        padding-top: 28px;
                        text-align: center;
                        box-sizing: border-box;
                        font-size: 14px;
                        font-weight: bold;
                        color: #000000;
                        a{
                            color: #000000;
                        }
                    }
                    li:hover{
                        background: #faf8f8;
                        border-bottom: 3px solid $bluecolor;
                    }
                }
            }
            .top{
                background: #dfdfde;
                height: 40px;
                line-height: 40px;
                .main{
                    width: 995px;
                    margin: 0 auto;
                    a{
                        color: #000000;
                        font-size: 14px;
                        margin-left: 25px;
                    }
                }
            }
        }
        .carou{
             width: 100%;
             height: 545px;
             position: relative; 
             box-shadow: 0 7px 16px #dbe9f0; 
            .imgWrap{
                @include secondbasic(100%,545px,0 auto);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            ul{
                width: 100px;
                height: 10px;
                position: absolute;
                left: 50%;
                margin-left: -50px;
                bottom: 18px;
                font-size: 0;
                li{
                    width: 10px;
                    height: 10px;
                    border-radius: 50% 50%;
                    background: $bluecolor;
                    display: inline-block;
                    a{
                      width: 10px;
                      height: 10px;
                      display: inline-block;  
                    }
                }
                li:first-of-type~li{
                    margin-left: 20px;
                    background: #a2d2e9;
                }
            }
        }
           

        .contact{
            @include secondbasic(100%,718px,0 auto);
            background: white;
            .title-wrap{
                    width: 100%;
                    height: 106px;
                    background: $weakwhite;
                    padding-top: 33px;     
                .contact-title{
                        @include secondbasic(257px,41px,0 auto);
                        text-align: center;
                        position: relative;            
                        h5{
                            font-size: 18px;
                            @include secondbasic(75px,18px,0 auto 0);
                            font-weight: bold;                
                        }
                        h6{
                            font-size: 10px;
                            font-weight: normal;
                            color: #bfbfbf;
                            @include secondbasic(92px,10px,13px auto 0);
                            position: absolute; 
                            left: 82px;
                            top: 20px;
                            width: 92px;
                            height: 10px;
                            background: $weakwhite;  
                        }
                        .through-line{
                            width: 257px;
                            border-bottom: 1px solid #c9c9c9;
                            margin: 21px auto 0;            
                        }
                    }
           }

                    .contact-table{
                    @include secondbasic(1074px,424px,121px auto 0);
                    .table-left{
                       width: 435px;
                       height: 424px; 
                       .company-information{
                           width: 438px;
                           height: 224px;
                           .information-left{
                                 border: 1px solid #ebebeb;
                                .code-wrap{  
                                    width: 125px;
                                    height: 125px;
                                    margin-bottom: 2px;
                                    padding: 6px;
                                    }                              
                                    p{
                                    margin-top: 11px;
                                    font-size: 14px;
                                    text-align: center;
                                    line-height: 22px;
                                    }
                               
                           }
                           .information-right{                                              
                               font-size: 14px;
                               margin-left: 28px;
                               li{
                                  margin-top: 7px;
                                  line-height: 24px;
                                  a{
                                     color: #747474; 
                                     span:first-child{
                                     margin-right: 15px;
                                     display: inline-block; 
                                     width: 17px;   
                                     height: 17px;
                                                                       
                                  }
                                  span:last-child{
                                      padding-left: 10px;
                                                 
                                  }
                                  }
                               }                        
                           }
                       }
                       .map{
                           width: 429px;
                           height: 195px;
                           margin-top: 44px;
                           img{
                               width: 100%;
                           }
                       }
                    }
                    .table-right{
                       width: 602px;
                       height: 439px;
                       margin-left: 37px;
                       border: 0;
                       @include secondbasic(602px,439px,0 0 0 37px);
                       input[type="submit"]{
                                    width: 94px;
                                    height: 30px;
                                    background: $bluecolor;
                                    text-align: center;
                                    margin-top: 11px;
                                    color: white;
                                    font-size: 13px;
                                    cursor: pointer;
                                }
                      table{
                          font-size: 13px;
                          border: 0;
                          tr{
                                                         
                          td{
                               border: 0;
                               height: 42px;
                               input[type="text"]{
                                   width: 604px;
                                   height: 34px;
                                   background: $weakwhite;
                                   border: 0;
                                   border: 1px dashed #d4d2d2;
                               
                            }
                        
                                textarea{
                                   width: 600px;
                                   height: 118px;
                                   display: inline-block;
                                   background: $weakwhite;
                                   border: 1px dashed #d4d2d2;
                                   resize: none;
                                }
                                
                                 
                                                               
                          }
                         }
                      }
                    }
                }
                
        }
        
        .about{
            @include secondbasic(100%,436px,0 auto);
            background: $weakwhite;                     
            .background-wrap{
                @include secondbasic(100%,343px,52px auto 0);
                background-image: url(../img/bigbackground.png);
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                padding-top: 49px; 
              
            }
              .about-title{
                @include secondbasic(257px,41px,0 auto);
                text-align: center;
                position: relative;
                h5{
                    font-size: 18px;
                    @include secondbasic(75px,18px,61px auto 0);
                    font-weight: bold;                
                }
                h6{
                    font-size: 10px;
                    font-weight: normal;
                    color: #bfbfbf;
                    @include secondbasic(92px,10px,13px auto 0);
                    position: absolute; 
                    left: 82px;
                    top: 20px;
                    width: 92px;
                    height: 10px;
                    background: $weakwhite;  
                }
                .through-line{
                    width: 257px;
                    border-bottom: 1px solid #c9c9c9;
                    margin: 21px auto 0;            
                }
            }
            .about-desc{
                @include secondbasic(1004px,64px,0 auto );
                line-height: 27px;
                font-size: 14px;
                text-align: center;
            }
            .about-pic{
                @include secondbasic(1050px,167px,40px auto 0);
                .piclist{
                   @include secondbasic(1050px,167px,0 auto);
                   font-size: 0;
                   text-align: center;
                   background: white;
                   li{
                       display: inline-block;
                       margin: 4px auto;                                     
                   }
                   li:nth-child(2n){
                       margin: 0 20px;
                   }
                }
            }
        }
        .product{
            width: 977px;
            height: 474px;
            margin: 65px auto 0;
            .module:nth-of-type(3){
                .module-top{
                    background: $purplecolor;
                }
                .module-top::after{
                    border-top: 21px solid $purplecolor;
                }
                .module-middle{
                    @include secondbasic(290px,125px,45px auto 0);
                    border:0;
                    img{
                        width: 100%;
                    }
                }
                .module-bottom{
                    @include secondbasic(293px,72px,34px auto 0);
                    background: url(../img/bg_a.png) 0 0 no-repeat;
                    padding-top: 26px;
                    p{
                        @include secondbasic(202px,32px,0 auto);
                        font-size: 10px;
                        line-height: 20px;
                        font-weight: bold;
                    }
                }
            }
            .module:nth-of-type(2){
                .module-top{
                    background: $greencolor;
                }
                .module-top::after{
                    border-top: 21px solid $greencolor;
                }
                .module-middle{
                    width: 310px;
                    height: 115px;
                    border: 0;
                    position: relative;
                    .imgwrap{                 
                        @include secondbasic(201px,115px,60px auto 0);
                       a{
                          width: 100%;
                          img{
                            width: 100%;
                            }
                       }
                    }
                }
                .module-bottom{
                   width: 310px;
                   height: 86px;
                    h5{
                        font-size: 18px;
                        color: $bluecolor;
                        @include secondbasic(87px,19px,42px auto 0);
                    }
                    p{
                        font-size: 12px;                        
                        text-align: center;
                        @include secondbasic(217px,12px,20px auto 0);
                        font-weight: bold;
                    }
                }
                .module-middle::before{
                    content: '';
                    width: 24px;
                    height: 32px;
                    display: inline-block;
                    background: url(../img/prev.png) 0 0 no-repeat;
                    position: absolute;
                    left: 11px;
                    bottom: 22px;
                    cursor: pointer;
                }
                
                .module-middle::after{
                    content: '';
                    width: 24px;
                    height: 32px;
                    display: inline-block;
                    background: url(../img/next.png) 0 0 no-repeat;
                    position: absolute;
                    right: 11px;
                    bottom: 22px;
                    cursor: pointer;
                }
                
            }
            .module{
                width: 315px;
                height: 473px;
                margin-left: 16px;
                box-shadow: 5px 1px 20px #e3e3e3;
                background: white;
                .module-top{
                    @include basic(315px,168px,$bluecolor);                  
                    position: relative;
                    .module-sign{
                        @include secondbasic(54px,54px,0 auto);
                        padding-top: 15px;
                        img{
                            width: 100%;
                        }
                    }
                    h5{
                        @include secondbasic(71px,17px,16px auto 0);
                        text-align: center;
                        color: $whitecolor;
                        font-size: 16px;
                    }
                    h6{
                        @include secondbasic(116px,14px,16px auto 0);
                        text-align: center;
                        color: $whitecolor;
                        font-size: 14px; 
                    }
                    .underline{
                        border-top: 1px solid $whitecolor;
                        @include secondbasic(106px,0,6px auto 0);                       
                    }
                }
                .module-top::after{
                    content: '';
                    display: block;
                    clear: both;
                    width: 0;
                    height: 0;
                    border-top: 21px solid $bluecolor;
                    border-left: 14px solid transparent;
                    border-right: 14px solid transparent;
                    position: absolute;
                    left: 50%;
                    margin-left: -14px;
                    bottom: -21px;                
                }
                
                .module-middle{
                    width: 279px;
                    height: 178px;
                    border-bottom: 1px dashed #c1c1c1;
                    margin: 0 auto;
                    div:first-of-type{
                        width: 111px;
                        height: 128px;
                        h5{
                            width: 80px;
                            height: 13px;
                            font-size: 13px;                        
                            @include secondbasic(80px,13px,29px 0 17px 18px); 
                             a{
                                color: $blackfontcolor;
                            }
                        }
                        div{
                           @include secondbasic(111px,98px,0 0 0 16px); 
                           img{
                               width: 100%;
                           }
                        }
                    }
                    div:nth-of-type(2){
                          p{
                               font-size: 13px;
                               line-height: 25px;
                               font-weight: bold;
                               a{
                                    color: $blackfontcolor;
                                 } 
                          }                  
                        @include secondbasic(126px,86px,64px 0 0 25px); 
                    }                                
                }
                .module-bottom{
                    width: 315px;
                    height: 101px;
                   ul{
                     @include secondbasic(280px,62px,25px 0 0 16px);
                     font-size: 13px; 
                     li{
                         font-weight: bold;
                         span{
                             width: 5px;
                             height: 5px;
                             border-radius: 50% 50%;
                             display: inline-block;
                             background: $bluecolor;
                             margin-bottom: 2px;
                             margin-right: 7px;
                         }
                         a{
                             color: $blackfontcolor;
                         }
                         
                     }  
                     li:not(:first-of-type){
                         margin-top: 12px;  
                     }
                   } 
                }
            }
            .module:first-of-type{
                margin-left: 0;
            }
        }  
   
   footer{
       width: 100%;
       height: 137px;
       background: $bluecolor;
      .footer-top{ 
          width: 100%;
          height: 102px;
          font-size: 13px;
          .top{
           width: 196px;
           height: 20px;
           margin: 0 auto;
           font-size: 13px;
           padding-top: 27px;
           span{
               line-height: 13px;
               color: #faf9f9;
           }
           
           span:first-child{
               margin-right: 18px;
               line-height: 18px;
           }
           
           span:last-child{
               width: 68px;
               height: 20px;
               margin-left: 20px;
               
           }
       }
       ul{
           width: 406px;
           height: 13px;
           font-size: 13px;
           margin: 26px auto 23px;
           text-align: center;        
           li{
               display: inline-block;
               color: #faf9f9;
               a{
                   color: #faf9f9;
               }
           }
       }
       
       }
       
       .footer-bottom{
           width: 100%;
           height: 35px;
           background: #1c1b29;
           p{
               width: 489px;
               height: 13px;
               font-size: 13px;
               text-align: center;
               color: #faf9f9;
               margin: 0 auto;
               line-height: 35px

           }
       }
   }
   }

}

.swiper-container{
    height: 545px;;
    width: 100%;
        }
.swiper-slide{
    text-align: center;
    line-height: 500px;
}    